<!-- 
        作者：dailc
        时间：2017-08-29
        描述： vue的支持
-->
<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title>vue support</title>
        <link rel="stylesheet" href="../../dist/debug/minirefresh.css" />
        <link rel="stylesheet" href="../common/common.css" />
    </head>

    <body>

        <nav class="navbar-header">
            <a class="nav-btn-left" href="../index.html">dashboard</a>
            vue的支持
        </nav>
        <div class="content">
            <div id="minirefresh" class="minirefresh-wrap">

                <div class="minirefresh-scroll">

                    <ul class="data-list" id="listdata">
                        <li v-for="item in listData" class="list-item">
                            <h3 class="msg-title">
                                {{item.title}}
                            </h3>
                            <span class="msg-fs14 msg-date">
                                {{item.date}}
                            </span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="vue.min.js"></script>
        <script type="text/javascript" src="../../dist/debug/minirefresh.js"></script>
        <script>
            new Vue({
                el: ".content",
                data: {
                    minirefresh: null,
                    maxDataSize: 30,
                    requestDelayTime: 600,
                    counter: 0,
                    listData: []
                },
                mounted: function() {
                    var self = this;

                    self.miniRefresh = new MiniRefresh({
                        container: '#minirefresh',
                        down: {
                            callback: self.downCallback
                        },
                        up: {
                            isAuto: true,
                            callback: self.upCallback
                        }
                    });
                },
                methods: {
                    downCallback: function() {
                        var self = this;

                        setTimeout(function() {
                            self.listData = self.createTestData(10, true);
                            self.miniRefresh.endDownLoading(true);
                        }, self.requestDelayTime);
                    },
                    upCallback: function() {
                        var self = this;

                        setTimeout(function() {
                            self.listData = self.listData.concat(self.createTestData(10));
                            self.miniRefresh.endUpLoading(self.listData.length >= self.maxDataSize ? true : false);
                        }, self.requestDelayTime);
                    },
                    createTestData: function(count, isReset) {
                        if (isReset) {
                            this.counter = 0;
                        }

                        var res = [],
                            dateStr = (new Date()).toLocaleString();

                        for (var i = 0; i < count; i++) {
                            res.push({
                                title: '测试第【' + this.counter + '】条新闻标题',
                                date: dateStr
                            });
                            
                            this.counter++;
                        }

                        return res;
                    }
                }
            });
        </script>
    </body>

</html>